<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/libs/jquery.js"></script>
    <script src="./js/detalis.js"></script>
    <script src="./js/tabChange.js"></script>
    <link rel="stylesheet" href="./css/qyxc.min.css">
    <link rel="stylesheet" href="./css/detalis.min.css">
    <link rel="stylesheet" href="./css/zomm/iconfont.css">
</head>

<body>
    <div class="heade">
        <div class="header">
            <div class="site-nav">
                <div class="header_top">
                    <p class="sn_bake_home iconfont icon-fangzi fl "><a href="#" class="fs12 "
                            style="color:#999;">天猫首页</a>
                    </p>
                    <p class="sn_longin_info fl fs12"><em class=" fl">喵,欢迎来天猫</em><a href="#" class="fl sn_longin"
                            style="color:#999;">请登录</a><a href="#" class="fl sn_register" style="color:#999;">免费注册</a>
                    </p>
                    <ul class="sn_quick_ment">
                        <li class="fl fs12 k"><a href="#" class="remove">我的淘宝</a>
                            <div class="bd-panel"><a href="">买到宝贝</a><a href="">卖出宝贝</a></div>

                        </li>
                        <li class="fl fs12"><i class="iconfont icon-gouwuche"></i><a href="#">购物车</a></li>
                        <li class="fl fs12"><a href="#">收藏夹</a></li>
                        <li class="fl">|</li>
                        <li class="fl fs12"><a href="#">淘宝网</a></li>
                        <li class="fl fs12"><a href="#">商家支持</a></li>
                    </ul>
                </div>
            </div>
            <div class="headCon">
                <h1>
                    <p class="logo"></p>
                </h1>

                <div class="shopExtra">
                    <div class="slogo">
                        <a href="" class="slogo-shopname">哈根达斯食品旗舰店</a>
                        <div class="ww-extraicon"><span class="ww-light"
                                title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"></span></div>
                    </div>
                    <div class="shop-info">
                        <div class="shopdsr-item">
                            <div>描述</div>
                            <div class="shopdsr-score"><span>4.9</span>
                                <s></s>
                            </div>
                        </div>
                        <div class="shopdsr-item">
                            <div>服务</div>
                            <div class="shopdsr-score"><span>4.9</span>
                                <s></s>
                            </div>

                        </div>
                        <div class="shopdsr-item">
                            <div>物流</div>
                            <div class="shopdsr-score"><span>4.9</span>
                                <s></s>
                            </div>
                            <a href=""></a>
                        </div>
                    </div>


                </div>
                <div class="mallSearch fr"><input type="text" placeholder="搜索  天猫/商品/商铺"><button>搜索</button>
                </div>
            </div>
            <div class="page">

                <div class="tb-shop">
                    <div class="lagout">
                        <div class="col-mian">
                            <div class="fl "><a href="" class="all-cats">本店所有商品</a> </div>
                            <ul class="menu-list fl">
                                <li class="fl menu"><a href="" class="link">店铺首页</a> </li>
                                <li class="fl menu"><a href="" class="link">全部宝贝</a> </li>
                                <li class="fl menu"><a href="" class="link">热卖宝贝</a> </li>
                                <li class="fl menu"><a href="" class="link">新品上市</a> </li>
                                <li class="fl menu"><a href="" class="link">品牌故事</a> </li>
                            </ul>
                        </div>

                    </div>
                    <div class="detall">
                        <div class="tm-detall-meta">
                            <div class="tm-clear">
                                <div class="to-warp fl">
                                    <div class="tb-detail-hd">
                                        <!-- <h1>
                                            acornfresh大西洋真鳕鱼新鲜宝宝辅食鳕鱼片海鲜雪鱼块带皮鱼400g
                                        </h1>
                                        <p class="newp">
                                            顺丰冷链 已核酸检测
                                        </p>
                                        <div class="tm-fcs-panel">
                                            <dl class="tm-price-cur">
                                                <dt class="tb-metalit">价格</dt>
                                                <dd><span class="tm-yen">￥</span><span class="tm-price">139.00</span>
                                                </dd>

                                            </dl>
                                        </div> -->
                                    </div> 
                                    <div class="tm-ind-panel">
                                        <li class="tm-ind-item">
                                            <div class="tm-indcon"><span class="tm-label">月销量</span><span
                                                    class="tm-count">32</span></div>
                                        </li>
                                        <li class="tm-ind-item">
                                            <div class="tm-indcon"><span class="tm-label">月销量</span><span
                                                    class="tm-count">32</span></div>
                                        </li>
                                        <li class="tm-ind-item">
                                            <div class="tm-indcon"><span class="tm-label">月销量</span><span
                                                    class="tm-count">32</span></div>
                                        </li>

                                    </div>
                                    <div class="tb-sku">
                                        <div class="tb-amount"><span class="fl tb-num">数量</span><span
                                                class="j_Amount">个数:1</span></div>
                                        <div class="tb-action">
                                            <div class="tb-btn-buy "><a href="#" title="点击此按钮进入购买"
                                                    class="tb-color">立即购买</a></div>
                                            <div class="tb-btn-buy"><a href="#" title="点击此按钮进入购买">加入购物车</a></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="tb-gallery">
                                    <div class="tb-booth"><a href="#"><span
                                                class="tb-zoomIcn iconfont icon-fangdajing"></span><span
                                                class="ks-imagezoon-warp"><img src="" alt="" /><span
                                                    class="ks-imagezoom-lens"></span></span></a></div>
                                    <div class="tb-thumb-warp">
                                        <ul class="tb-thumb">

                                        </ul>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="ald-skuRight">
                            <div class="ald-inner">
                                <div class="ald-hd"><s></s><span>看了又看</span></div>
                                <div class="ald-carousel">
                                    <div class="warpCon">
                                        <ul class="ald-switchable">
                                            <li>
                                                <div class="img"><a href="#" title="哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家"><img
                                                            src="./images/no7day/slun1.jpg" alt=""></a>
                                                    <p>￥156.00</p>
                                                </div>
                                                <p class="loock-title"><a href="#">哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家</a></p>
                                            </li>
                                            <li>
                                                <div class="img"><a href="#" title="哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家"><img
                                                            src="./images/no7day/slun1.jpg" alt=""></a>
                                                    <p>￥156.00</p>
                                                </div>
                                                <p class="loock-title"><a href="#">哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家</a></p>
                                            </li>
                                            <li>
                                                <div class="img"><a href="#" title="哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家"><img
                                                            src="./images/no7day/slun1.jpg" alt=""></a>
                                                    <p>￥156.00</p>
                                                </div>
                                                <p class="loock-title"><a href="#">哈根达斯冰淇淋 4个脆皮条 顺丰冷链配送到家</a></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <ul class="ald-switchable-trigger">
                                        <li class="ald-switchable-prev-btn fl"></li>
                                        <li class="ald-switchable-next-btn fr"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="bd">
                            <div class="tm-clear">
                                <div class="main-warp fl">
                                    <div class="j-TabBarBox">
                                        <ul class="j-TabBar">
                                            <li class="tm-selected tab-item">商品详情</li>
                                            <li class="tab-item">累计评价<em>7</em></li>
                                            <li class="tm-qrcode-icon"><a href="#" class="tm-qr-togger">手机购买</a><img
                                                    src="./images/no7day/loerwm.png" alt="" class="tm-qrcode-pic">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="main selected fw">
                                        <div class="attributes ">
                                            <div class="attributes-list">
                                                <div class="tm_brandAttr">
                                                    <div class="name">品牌名称: <span
                                                            class="J_EbrandLogo">Haagen-Dazs/哈根达斯</span></div>
                                                </div>
                                                <p class="attr-list-hd"><em>产品参数:</em></p>
                                                <ul class="J_AttrUL">
                                                    <li>厂名：法国</li>
                                                    <li>厂名：法国</li>
                                                    <li>厂家联系方式：800-820-7917</li>
                                                    <li>保质期：420 天</li>
                                                    <li>品牌: Haagen-Dazs/哈根达斯</li>
                                                    <li>口味: 组合A: 葡萄朗姆酒品脱*1+比利时巧克力品脱*1+抹茶小纸杯*1+曲奇香奶小纸杯*1++香草小纸杯*1+草莓小纸杯*1
                                                        组合B: 香草品脱*1+曲奇香奶品脱*1+比利时巧克力小纸杯*1+曲奇香奶小纸杯*1+夏威夷果仁小纸杯*1+草莓小纸杯
                                                        组合C:品脱冰淇淋口味：葡萄朗姆酒+草莓 ;小纸杯冰淇淋口味：香草*2+草莓*2
                                                        组合D:品脱冰淇淋口味：葡萄朗姆酒+草莓;小纸杯冰淇淋口味：香草*2+夏威夷果仁*2</li>
                                                    <li>包装方式: 盒装</li>
                                                    <li>净含量: 1087g</li>
                                                    <li>包装规格: 6盒</li>
                                                </ul>
                                                <div class="tb-validity">生产日期: 2019-02-04 至 2019-07-02</div>

                                            </div>
                                        </div>

                                        <div class="description ">
                                            <div class="ke-post">
                                                <p>&nbsp;</p>
                                                <p>&nbsp;</p>
                                                <p><a href="#"><img src="./images/no7day/xiam1.jpg" alt=""></a></p>
                                                <p><a href="#"><img src="./images/no7day/xm1.jpg" alt=""></a></p>
                                                <p><a href="#"><img src="./images/no7day/xm2.jpg" alt=""></a></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="J_Detail main">
                                        <div class="J_DetailSection">
                                            <div class="tm-rate">
                                                <div class="rate-header">
                                                    <div class="rate-score">
                                                        <h4>与描述相符</h4>
                                                        <span>4.9</span>
                                                    </div>
                                                    <div class="rate-tag-box">
                                                        <div class="rate-tag-label"><span></span>大家都写到</div>
                                                        <div class="rate-tag-list">
                                                            <ul class="rate-tag-inner">
                                                                <li><span>很好吃(20)</span> </li>
                                                                <li><span>物流很快(4)</span> </li>
                                                                <li><span>客服态度很好(2)</span> </li>
                                                                <li><span>会回购(2)</span> </li>
                                                                <li><span>小朋友能吃(2)</span> </li>
                                                                <li><span class="bad">性价比太低(3)</span> </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="rate-grid">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="tm-col-master">
                                                                        <div class="tm-rate-content">
                                                                            <span>奶香浓郁口味纯正，包装严密，物流速度也很快，非常满意</span>
                                                                        </div>
                                                                        <div class="tm-rate-date">08.10</div>
                                                                    </td>
                                                                    <td class="col-author">
                                                                        <div class="rate-user-info">t<span>***</span>5
                                                                            <span>(匿名)</span>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sub">
                                    <div class="J_DcAsyn">
                                        <div class="side-shop-info">
                                            <div class="shop-intro">
                                                <h3 class="hd">
                                                    <div><a href="" class="f12">哈根达斯食品旗舰店</a><span></span></div>
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="shop-ages">
                                            <span class="icon fl">4</span>
                                            <div class="text ">天猫4年店</div>
                                            <div class="main-info">
                                                <div class="shopdsr-item">
                                                    <div class="shopdsr-title fs12">描 述</div>
                                                    <div class="shopdsr-score "><span>4.9</span>
                                                    </div>
                                                </div>
                                                <div class="shopdsr-item">
                                                    <div class="shopdsr-title fs12">描 述</div>
                                                    <div class="shopdsr-score "><span>4.9</span>
                                                    </div>
                                                </div>
                                                <div class="shopdsr-item">
                                                    <div class="shopdsr-title fs12">描 述</div>
                                                    <div class="shopdsr-score "><span>4.9</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="btnArea"><a href="#" class="enterShop">进店逛逛</a><a href="#"
                                                    class="favShop">收藏店铺</a></div>
                                        </div>

                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="tmall-desc">
                    <dl class="ensure">
                        <dt><span>购物指南</span></dt>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">开通支付宝</a></dd>
                        <dd><a href="">支付宝充值</a></dd>
                    </dl>
                    <dl class="ensure">
                        <dt><span>购物指南</span></dt>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">开通支付宝</a></dd>
                        <dd><a href="">支付宝充值</a></dd>
                    </dl>
                    <dl class="ensure">
                        <dt><span>购物指南</span></dt>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">开通支付宝</a></dd>
                        <dd><a href="">支付宝充值</a></dd>
                    </dl>
                    <dl class="ensure">
                        <dt><span>购物指南</span></dt>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">开通支付宝</a></dd>
                        <dd><a href="">支付宝充值</a></dd>
                    </dl>
                    <dl class="ensure">
                        <dt><span>购物指南</span></dt>
                        <dd><a href=""><img src="./images/bottomerweima.png" alt=""></a></dd>

                    </dl>
                </div>
                <div class="tmallcopyright">
                    <div class="mui-global">
                        <p class="footer-tamllinfo">
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                            <a href="">关于天猫</a>
                        </p>
                        <p>
                            <a href="">阿里巴巴集团</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                            <a href="">淘宝网</a> |
                        </p>
                        <div class="footer-copyright">
                            <a href="https://beian.miit.gov.cn/#/Integrated/index">增值电信业务经营许可证：浙B2-20110446</a>
                            <span>市场名称登记证：工商网市字3301004119号</span>
                            <span>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</span>
                            <br>
                            <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                            互联网药品信息服务资质证书编号：
                            <a href="//img.alicdn.com/tps/TB1vi6vPVXXXXbVXVXXXXXXXXXX-927-653.png">浙-（经营性）-2017-0005</a>
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010002000120">
                                <img src="/images/guohui.png" alt="">
                                浙公网安备 33010002000120号
                            </a>


                        </div>
                    </div>
                </div>
            </div>
            <div class="ks-overlay">
                <div class="ks-overlay-content"><img src="" alt=""></div>
            </div>


</body>

</html>
<script>
    $.ajax({
        url: './api/prodList',
    }).then(function (res) {
        let { msg, data } = res;
        
        strHtml = ``
        // console.log(data[1].imgs.bigImg[0]);
        data.forEach(item => {
            strHtml = `
            <h1>   
           ${item.pName}
          </h1>
           <p class="newp">
           ${item.newp}
            </p>
           <div class="tm-fcs-panel">
           <dl class="tm-price-cur">
          <dt class="tb-metalit">价格</dt>
           <dd><span class="tm-yen">￥</span><span class="tm-price">${item.pPrice}</span>
            </dd>
            </dl>
            </div>
            `
            
              return strHtml;
        })
        // console.log(strHtml);
        $('.tb-detail-hd').append(strHtml)
    })

</script>